{% extends "trees/base.html" %}
{% block title %}Verify - JM3{% endblock %}
{% block content %}
<div class="col-12 col-md-5 mx-auto text-center" style="margin-top:8vh;">
  <div class="progress mb-4" style="height:6px;"><div class="progress-bar bg-jm3" style="width:85%"></div></div>
  <div style="font-size:2.5rem;">📧</div>
  <h3 class="mb-1">Check your email</h3>
  <p class="text-muted">We sent a 6-digit code to your email. Enter it below.</p>

  {% if error %}
    <div class="alert alert-danger mb-3">{{ error }}</div>
  {% endif %}

  <form method="post">
    {% csrf_token %}
    <input type="text" name="code" inputmode="numeric" maxlength="6"
           class="form-control form-control-lg text-center mb-2" placeholder="000000" autofocus required
           style="letter-spacing:.5rem;font-size:1.6rem;">
    <button type="submit" class="btn btn-jm3 btn-lg w-100">Verify & Sign In</button>
    <p class="form-text mt-2">Code expires in 10 minutes</p>
    <p><a href="{% url 'ob_phone' %}" class="text-muted">&larr; Change email</a></p>
  </form>
</div>
{% endblock %}
{% block extra_js %}{% endblock %}